<template>
  <el-row class="board-page-wrapper">
    <section class="query-container">
      <div class="post-wrapper">
        <span class="query-label">所属单位：</span>
        <span>信息中心</span>
      </div>
      <div class="salary-wrapper">
        <span class="query-label">工资月</span>
        <el-select v-model="query.monthChoose" size="small">
          <el-option label="202011" value="1"></el-option>
          <el-option label="202012" value="2"></el-option>
        </el-select>
      </div>
      <div>
        <el-button size="small">搜索</el-button>
      </div>
    </section>
    <section class="board-table-wrapper">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" align="center"> </el-table-column>
        <el-table-column prop="month" label="工资月" width="85" align="center"> </el-table-column>
        <el-table-column prop="departName" label="部门名称" align="center"> </el-table-column>
        <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
        <el-table-column prop="idCard" label="身份证" align="center"> </el-table-column>
        <el-table-column prop="levelSalary" label="薪级工资" align="center"> </el-table-column>
        <el-table-column prop="postSalary" label="岗位工资" align="center"> </el-table-column>
        <el-table-column prop="serviceAllowance" label="在职津贴分" align="center"> </el-table-column>
        <el-table-column prop="achieveAllowance" label="业绩津贴分" align="center"> </el-table-column>
        <el-table-column prop="degreeAllowance" label="学位津贴" align="center"> </el-table-column>
        <el-table-column prop="directorAllowance" label="教研主任津贴" align="center"> </el-table-column>
        <el-table-column prop="unionMember" label="工会会员" align="center"> </el-table-column>
        <el-table-column prop="seniorityPay" label="工龄工资" align="center"> </el-table-column>

        <el-table-column prop="seniorityPay" label="课时工资" align="center"> </el-table-column>
        <el-table-column prop="seniorityPay" label="餐补" align="center"> </el-table-column>
        <el-table-column prop="seniorityPay" label="教导员津贴" align="center"> </el-table-column>
        <el-table-column prop="seniorityPay" label="工资补发" align="center"> </el-table-column>
        <el-table-column prop="seniorityPay" label="其他扣发" align="center"> </el-table-column>
        <el-table-column prop="seniorityPay" label="养老保险" align="center"> </el-table-column>
        <el-table-column prop="seniorityPay" label="医疗保险" align="center"> </el-table-column>
        <el-table-column prop="seniorityPay" label="失业保险" align="center"> </el-table-column>
        <el-table-column prop="seniorityPay" label="工伤保险" align="center"> </el-table-column>
      </el-table>
    </section>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        query: {
          monthChoose: '1'
        },
        tableData: [
          {
            id: 1,
            month: '20201221',
            departName: '信息中心'
          }
        ]
      }
    },
    components: {}
  }
</script>

<style lang="scss" scoped>
  .board-page-wrapper {
    padding: 10px;
    .query-container {
      padding: 10px 30px;
      display: flex;
      margin-left: -15px;
      margin-right: -15px;
      & > div {
        line-height: 32px;
        padding: 0 15px;
      }
      .query-label {
        margin-right: 5px;
      }
    }
  }
</style>
